<template>
  <div>
    <CustomTable
      :showAlert="false"
      ref="table"
      :columns="columns"
      :loading="loading"
      :dataSource="pageData"
      :showHeader="true"
      :showSelection="true"
      @selectedRow="onSelectedRow"
      @change="onTableChange"
    >
      <template slot="order" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="name" slot-scope="text, record">
        <!-- <p>{{ record.keyword }}</p> -->
        <div class="nameBox">
          <span class="qbTitle" v-html="highLightKeywords(text, Keywords)"></span>
          <a-tag :color="getColor(record.sourceType)">{{ record.sourceType }}</a-tag>
        </div>
        <p class="itemFBox">
          <span>情报ID：<j-ellipsis :value="record.infoCode" :length="10" /></span>
          <span class="sp">发布时间：{{ record.publishedTime }}</span>
          <span class="sp">发布位置：{{ record.publishedArea }}</span>
          <span class="sp">推送时间：{{ record.pushTime }}</span>
          <span class="sp">商品价格：¥ {{ record.goodsPrice }}</span>
          <span class="sp">评价数量：{{ record.chatNum }}</span>
          <a-tag>{{ record.goodsType }}</a-tag>
        </p>
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="onDetail(record)">详情</a>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  components: {
    CustomTable,
  },
  props: {
    pageData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    mType: {
      type: String,
    },
    Keywords: {
      type: [],
    },
  },
  data() {
    return {
      loading: false,
      selectKeys: [],
      columns: [
        {
          title: '',
          dataIndex: 'name',
          align: 'left',
          // width: 130,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '',
          key: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
          width: 60,
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  // watch: {
  //   pageData(newValue, oldValue) {
  //     console.log('1111')
  //     this.data = newValue
  //   },
  // },
  created() {
    // console.log('2222')
    // console.log(this.pageData)
  },
  async mounted() {},
  methods: {
    /**
     * 匹配每一个关键字字符
     * @param {Object} text 内容
     * @param {Object} keyword 关键词
     * @param {Object} tag 被包裹的标签
     */
    highLightKeywords(text, words, tag) {
      tag = tag || 'span' // 默认的标签，如果没有指定，使用span
      var i,
        len = words.length,
        re
      for (i = 0; i < len; i++) {
        // 正则匹配所有的文本
        re = new RegExp(words[i], 'g')
        if (re.test(text)) {
          text = text.replace(re, '<' + tag + ' class="highlight">$&</' + tag + '>')
        }
      }
      return text
    },
    getColor(str) {
      if (str == '淘宝') return 'red'
      if (str == '闲鱼') return 'pink'
      if (str == '贴吧') return 'blue'
      if (str == '微博') return 'purple'
      if (str == '朋友圈') return 'green'
      if (str == '其他') return 'green'
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
    },
    onTableChange(pageFilter, filters, sorter) {
      this.pageFilter = { ...this.pageFilter, ...pageFilter }
      this.$emit('onRefreshTable', this.pageFilter)
    },
    onClearRowKeys() {
      this.$refs.table.onClearRowKeys()
    },
    // 详情
    onDetail(record) {
      this.$router.push({
        path: '/smuggleInformation/detail',
        query: {
          id: record.id,
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.plBox /deep/.ant-col-5 {
  width: 25%;
}
.nameBox {
  .qbTitle {
    color: #272727;
    // display: block;
    font-size: 14px;
    font-weight: 550;
    margin-bottom: 10px;
  }
  /deep/.ant-tag {
    margin-left: 30px;
  }
  margin-bottom: 10px;
}

.itemFBox {
  span {
    color: #8d8d8d;
    font-size: 13px;
  }
  .ant-tag {
    color: #272727;
    margin-left: 10px;
  }
  .sp {
    margin-left: 20px;
  }
}

/deep/.ant-table-thead > tr > th {
  background-color: #fff;
}
/deep/.ant-table-tbody .ant-table-row td {
  padding-bottom: 0;
}
/deep/.ant-table-tbody > tr > td {
  padding: 16px 0;
}
/deep/.highlight {
  color: #f7a945;
}
</style>
